<script setup>
import TheIcon from "./TheIcon.vue";
defineProps({
  likes: Number,
  comments: Number,
  favors: Number,
  likeByMe: Boolean,
  favorsByMe: Boolean,
});
defineEmits(["likeClick", "commentsClick", "favorClick"]);
</script>

<template>
  <div class="postActions">
    <TheIcon
      :fill="likeByMe ? '#FF3C3C' : 'none'"
      :stroke="likeByMe ? '#FF3C3C' : 'none'"
      icon="like"
      @click="emit('likeClick')"
    ></TheIcon>
    <span>{{ likes || 0 }}</span>
    <TheIcon fill="none" stroke="#000000" icon="comment"></TheIcon>
    <span>{{ comments || 0 }}</span>
    <TheIcon fill="none" stroke="#000000" icon="favorite"></TheIcon>
    <span>{{ favors || 0 }}</span>
  </div>
</template>

<style scoped>
.postActions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  column-gap: 16px;
  row-gap: 4px;
}

.postActions > svg {
  width: 32px;
  height: 32px;
  grid-row: 1/3;
  cursor: pointer;
}

.postActions > span {
  font-size: 14px;
}
</style>
